<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
      <a-form :form="form" slot="detail">
        <a-row>
          <a-col :span="24">
            <a-form-item label="场地名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="[ 'name', validatorRules.name]" placeholder="请输入场地名称"></a-input>
            </a-form-item>
            <a-form-item label="每日限制入场人数" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input-number v-decorator="[ 'placeLimit', validatorRules.placeLimit]" placeholder="请输入每日限制入场人数"
                              style="width: 100%"/>
            </a-form-item>
            <a-form-item label="场地经度" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="[ 'longitude', validatorRules.longitude]" placeholder="请输入场地经度"></a-input>
            </a-form-item>
            <a-form-item label="场地纬度" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="[ 'latitude', validatorRules.latitude]" placeholder="请输入场地纬度"></a-input>
            </a-form-item>
            <a-form-item label="允许误差(米)" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input-number v-decorator="[ 'distance', validatorRules.distance]" style="width: 100%" placeholder="请输入允许误差"></a-input-number>
            </a-form-item>
            <a-form-item label="是否可用" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-radio-group buttonStyle="solid" v-decorator="[ 'status', validatorRules.status]">
                <a-radio-button :value="1">正常</a-radio-button>
                <a-radio-button :value="2">冻结</a-radio-button>
              </a-radio-group>
            </a-form-item>
          </a-col>
          <a-col v-if="showFlowSubmitButton" :span="24" style="text-align: center">
            <a-button @click="submitForm">提 交</a-button>
          </a-col>
        </a-row>
      </a-form>
    </j-form-container>
  </a-spin>
</template>

<script>

    import { httpAction, getAction } from '@/api/manage'
    import pick from 'lodash.pick'
    import { validateDuplicateValue } from '@/utils/util'
    import JFormContainer from '@/components/jeecg/JFormContainer'
    import JDate from '@/components/jeecg/JDate'

    export default {
        name: 'SdxcReservePlaceForm',
        components: {
            JFormContainer,
            JDate,
        },
        props: {
            //流程表单data
            formData: {
                type: Object,
                default: ()=>{},
                required: false
            },
            //表单模式：true流程表单 false普通表单
            formBpm: {
                type: Boolean,
                default: false,
                required: false
            },
            //表单禁用
            disabled: {
                type: Boolean,
                default: false,
                required: false
            }
        },
        data () {
            return {
                form: this.$form.createForm(this),
                model: {},
                labelCol: {
                    xs: { span: 24 },
                    sm: { span: 5 },
                },
                wrapperCol: {
                    xs: { span: 24 },
                    sm: { span: 16 },
                },
                confirmLoading: false,
                validatorRules: {
                    name: {
                        rules: [
                            {required: true, message: '请输入场地名称!'},
                        ]
                    },
                    placeLimit: {
                        rules: [
                            {required: true, message: '请输入每日限制入场人数!'},
                            {pattern: /^-?\d+$/, message: '请输入整数!'},
                        ]
                    },
                    longitude: {
                        rules: [
                            {required: true, message: '请输入场地经度!'},]
                    },
                    latitude: {
                        rules: [
                            {required: true, message: '请输入场地纬度!'},]
                    },
                    distance: {
                        rules: [
                            {required: true, message: '请输入允许误差!'},
                            {pattern: /^[1-9]\d*$/, message: '请输入正整数!'},
                        ]
                    },
                    status: {
                        initialValue: 1,
                        rules: []
                    },
                },
                url: {
                    add: "/reserve/sdxcReservePlace/add",
                    edit: "/reserve/sdxcReservePlace/edit",
                    queryById: "/reserve/sdxcReservePlace/queryById"
                }
            }
        },
        computed: {
            formDisabled(){
                if(this.formBpm===true){
                    if(this.formData.disabled===false){
                        return false
                    }
                    return true
                }
                return this.disabled
            },
            showFlowSubmitButton(){
                if(this.formBpm===true){
                    if(this.formData.disabled===false){
                        return true
                    }
                }
                return false
            }
        },
        created () {
            //如果是流程中表单，则需要加载流程表单data
            this.showFlowData();
        },
        methods: {
            add () {
                this.edit({});
            },
            edit (record) {
                this.form.resetFields();
                this.model = Object.assign({}, record);
                this.visible = true;
                this.$nextTick(() => {
                    this.form.setFieldsValue(pick(this.model,'name','placeLimit','longitude','latitude','distance','status','qrCode','createBy','createTime','updateBy','updateTime'))
                })
            },
            //渲染流程表单数据
            showFlowData(){
                if(this.formBpm === true){
                    let params = {id:this.formData.dataId};
                    getAction(this.url.queryById,params).then((res)=>{
                        if(res.success){
                            this.edit (res.result);
                        }
                    });
                }
            },
            submitForm () {
                const that = this;
                // 触发表单验证
                this.form.validateFields((err, values) => {
                    if (!err) {
                        that.confirmLoading = true;
                        let httpurl = '';
                        let method = '';
                        if(!this.model.id){
                            httpurl+=this.url.add;
                            method = 'post';
                        }else{
                            httpurl+=this.url.edit;
                            method = 'put';
                        }
                        let formData = Object.assign(this.model, values);
                        console.log("表单提交数据",formData)
                        httpAction(httpurl,formData,method).then((res)=>{
                            if(res.success){
                                that.$message.success(res.message);
                                that.$emit('ok');
                            }else{
                                that.$message.warning(res.message);
                            }
                        }).finally(() => {
                            that.confirmLoading = false;
                        })
                    }

                })
            },
            popupCallback(row){
                this.form.setFieldsValue(pick(row,'name','placeLimit','longitude','latitude','distance','status','qrCode','createBy','createTime','updateBy','updateTime'))
            },
        }
    }
</script>